<template>
  <PageWrapper>
    <div id="web">
      <a-card>
        <h1>网站信息</h1>
        <a-tabs v-model:activeKey="activeKey" centered @change="tabChange">
          <a-tab-pane :key="item.key" :tab="item.tab" v-for="item in tabList">
            <div class="ant-basic-table">
              <a-table class="ant-table-striped" :columns="columns" :data-source="dataSource" bordered
                :row-selection="rowSelection" :pagination="false" rowKey="id">
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'content'">
                    <a @click="read(record.id)">查看</a>
                  </template>
                  <template v-if="column.key === 'home'">
                    <check-outlined v-if="record.source == '首页'" />
                  </template>
                  <template v-if="column.key === 'software'">
                    <check-outlined v-if="record.source == '软件产品'" />
                  </template>
                  <template v-else-if="column.dataIndex === 'operation'">
                    <a-popconfirm v-if="dataSource.length" title="确定删除" @confirm="onDelete(record.id)">
                      <a>删除</a>
                    </a-popconfirm>
                  </template>
                </template>
              </a-table>
            </div>
            <a-row justify="space-between" class="mt-4">
              <a-col>
                <a-pagination v-model:current="pageNo" :total="totalPage" @change="changePage" /> </a-col><a-col>
                <a-space v-if="activeKey == 3" class="btn-group">
                  <a-button @click="openRegister">注册</a-button> <a-button type="primary"
                    @click="onTry">试用</a-button></a-space></a-col></a-row>
          </a-tab-pane>
        </a-tabs>
        <!-- 宝贵意见 -->
        <a-modal v-model:visible="ideaVisible" title="宝贵意见" @ok="handleOk" :bodyStyle="{ padding: '24px' }">
          <p>来自：</p>
          <div style="border: 1px solid #e5e7eb; padding: 24px; min-height: 200px">{{
            ideaContent
          }}</div>
        </a-modal>
        <!-- 免费试用的注册 -->
        <a-modal v-model:visible="registerVisible" title="用户注册" ok-text="提交" cancel-text="取消"
          :bodyStyle="{ padding: '24px' }" @ok="onRegister">
          <a-form ref="registerRef" :model="registerState" :rules="registerRules"
            :label-col="{ style: { width: '80px' } }" name="basic" autocomplete="off">
            <a-form-item name="account" label="账号">
              <a-input v-model:value="registerState.account" />
            </a-form-item>
            <a-form-item name="password" label="密码">
              <a-input-password v-model:value="registerState.password" />
            </a-form-item>
          </a-form>
        </a-modal>
      </a-card>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'
import type { TableProps } from 'ant-design-vue'
import { Modal, message } from 'ant-design-vue'
import { ref, reactive, onMounted } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
import {
  contactList,
  delContact,
  contactMsg,
  requestList,
  delRequest,
  requestMsg,
  trialList,
  delTrial,
  authorize,
  register,
  partnerList,
  delPartner,
  partnerMsg
} from '/@/api/sys/msg'
import { CheckOutlined } from '@ant-design/icons-vue'
const token = localStorage.getItem('TOKEN_KEY')
//当前页码
const pageNo = ref(1)
// 总页码
const totalPage = ref(0)
let activeKey = ref(1)
const tabList = reactive([
  {
    key: 1,
    tab: '联系我们',
  },
  {
    key: 2,
    tab: '您的需求',
  },
  {
    key: 3,
    tab: '免费试用',
  },
  {
    key: 4,
    tab: '合作伙伴',
  },
])
//用户注册
const registerVisible = ref<boolean>(false)
const openRegister = () => {
  if (!selectedRows.value || selectedRows.value.length === 0) {
    message.warning('请先选择一项数据')
    return
  }
  registerVisible.value = true
}

interface registerValues {
  account: string
  password: string
}
const registerRef = ref()

const registerState = reactive<registerValues>({
  account: '',
  password: '',
})

const registerRules: Record<string, Rule[]> = {
  account: [{ required: true, message: '请输入您的账号' }],
  password: [{ required: true, message: '请输入您的密码' }],
}

const onRegister = () => {
  console.log(registerRef.value)
  registerRef.value
    .validateFields()
    .then(async (values: any) => {
      const res = await register({
        token,
        data: {
          msgId: selectedRowKeys.value[0],
          account: values.account,
          password: values.password,
        },
      })
      if (res.success === 1) {
        message.success('成功')
        getTable()
      } else {
        message.error(res.message)
      }
      registerVisible.value = false
      registerRef.value.resetFields()
    })
    .catch((info: any) => {
      console.log('Validate Failed:', info)
    })
}


//试用
const onTry = async () => {
  if (!selectedRows.value || selectedRows.value.length === 0) {
    message.warning('请先选择一项数据')
    return
  }
  const res = await authorize({
    token,
    data: {
      id: selectedRowKeys.value[0]
    }
  })
  if (res.success === 1) {
    message.success('成功')
    getTable()
  } else {
    message.error(res.message)
  }
}

//选中数据
interface DataType {
  userId: string
  softwareId: string
  partnerRentRowId: string
}
const selectedRowKeys = ref<string[]>([])
const selectedRows = ref<DataType[]>([])
const rowSelection: TableProps['rowSelection'] = {
  columnTitle: '选择',
  type: 'radio',
  columnWidth: 80,
  fixed: true,
  preserveSelectedRowKeys: true,
  onChange: (keys: string[], rows: DataType[]) => {
    selectedRowKeys.value = keys
    selectedRows.value = rows
  },
}
const ideaVisible = ref<boolean>(false)
const ideaContent = ref<string>('')
const read = async (key: string) => {
  let res = { data: { content: '' } }
  const id = key
  switch (activeKey.value) {
    case 1:
      res = await contactMsg({
        token,
        id,
      })
      break
    case 2:
      res = await requestMsg({
        token,
        id,
      })
      break
    case 4:
      res = await partnerMsg({
        token,
        id,
      })
      break

    default:
      break
  }
  ideaContent.value = res.data.content
  ideaVisible.value = true
}
const handleOk = () => {
  ideaVisible.value = false
}

const columns = ref<any>([])
const dataSource = ref<any>([])
//联系我们表格数据
const columns1 = ref([
  {
    title: '添加日期',
    dataIndex: 'addDate',
    key: 'addDate',
  },
  {
    title: '联系人姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '手机',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '导入来源',
    children: [
      {
        title: '首页',
        key: 'home',
        width: 100,
      },
      {
        title: '软件产品',
        key: 'software',
        width: 100,
      },
    ],
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '宝贵意见',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
])
const dataSource1 = ref([])
//您的需求
const columns2 = ref([
  {
    title: '添加日期',
    dataIndex: 'addDate',
    key: 'addDate',
  },
  {
    title: '联系人姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '手机',
    dataIndex: 'phone',
    key: 'phone',
  },

  {
    title: '宝贵意见',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
])
const dataSource2 = ref([])
//免费试用
const columns3 = ref([
  {
    title: '添加日期',
    dataIndex: 'addDate',
    key: 'addDate',
  },
  {
    title: '联系人姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '手机',
    dataIndex: 'phone',
    key: 'phone',
  },

  {
    title: '软件名称',
    dataIndex: 'softwareName',
    key: 'softwareName',
  },
  {
    title: '开始试用时间',
    dataIndex: 'beginDate',
    key: 'beginDate',
  },
  {
    title: '结束时间',
    dataIndex: 'endDate',
    key: 'endDate',
  },
  {
    title: '账号',
    dataIndex: 'account',
    key: 'account',
  },
  {
    title: '密码',
    dataIndex: 'password',
    key: 'password',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
])
const dataSource3 = ref([])
//合作伙伴
const columns4 = ref([
  {
    title: '添加日期',
    dataIndex: 'addDate',
    key: 'addDate',
  },
  {
    title: '联系人姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '手机',
    dataIndex: 'phone',
    key: 'phone',
  },

  {
    title: '宝贵意见',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
])
const dataSource4 = ref([])
dataSource.value = [...dataSource1.value]
columns.value = [...columns1.value]
const tabChange = () => {
  pageNo.value = 1
  getTable()
}

const onDelete = async (key: string) => {
  let res = { success: 0, message: '' }
  const ids = [key]
  switch (activeKey.value) {
    case 1:
      res = await delContact({
        token,
        data: { ids },
      })
      break
    case 2:
      res = await delRequest({
        token,
        data: { ids },
      })
      break
    case 3:
      res = await delTrial({
        token,
        data: { ids },
      })
      break
    case 4:
      res = await delPartner({
        token,
        data: { ids },
      })
      break

    default:
      break
  }
  if (res.success === 1) {
    message.success('成功')
    getTable()
  } else {
    message.error(res.message)
  }

}
// 联系我们
const getContact = async () => {
  const res = await contactList({
    token,
    pageNo: pageNo.value,
  })
  totalPage.value = res.data.totalPage
  dataSource1.value = res.data.items
  dataSource.value = [...dataSource1.value]
  columns.value = [...columns1.value]
}
// 您的需求
const getRequest = async () => {
  const res = await requestList({
    token,
    pageNo: pageNo.value,
  })
  totalPage.value = res.data.totalPage
  dataSource2.value = res.data.items
  dataSource.value = [...dataSource2.value]
  columns.value = [...columns2.value]
}
// 您的需求
const getTrial = async () => {
  const res = await trialList({
    token,
    pageNo: pageNo.value,
  })
  totalPage.value = res.data.totalPage
  dataSource3.value = res.data.items
  dataSource.value = [...dataSource3.value]
  columns.value = [...columns3.value]
}
// 合作伙伴
const getPartner = async () => {
  const res = await partnerList({
    token,
    pageNo: pageNo.value,
  })
  totalPage.value = res.data.totalPage
  dataSource4.value = res.data.items
  dataSource.value = [...dataSource4.value]
  columns.value = [...columns4.value]
}
function changePage() {
  getTable()
}
const getTable = () => {
  dataSource.value = []
  columns.value = []
  switch (activeKey.value) {
    case 1:
      getContact()
      break
    case 2:
      getRequest()
      break
    case 3:
      getTrial()

      break
    case 4:
      getPartner()

      break

    default:
      break
  }
}
// 页面加载时自动执行
onMounted(() => {
  getTable()
})
</script>
<style scoped>
#web {
  h1 {
    text-align: center;
    font-size: 30px;
  }

  .btn-group {
    display: flex;
    justify-content: end;
    margin-top: 20px;
  }
}
</style>
